<template>
  <div class="stats-overview">
    <!-- 顶部标签页 - 现代化设计 -->
    <div class="modern-tabs-container">
      <div class="modern-tabs-wrapper">
        <div 
          class="modern-tab" 
          :class="{ 'active': activeTab === 'industry' }" 
          @click="handleTabClick({ props: { name: 'industry' } })"
        >
          <el-icon class="tab-icon"><TrendCharts /></el-icon>
          <span>行业分析</span>
        </div>
        <div 
          class="modern-tab" 
          :class="{ 'active': activeTab === 'region' }" 
          @click="handleTabClick({ props: { name: 'region' } })"
        >
          <el-icon class="tab-icon"><MapLocation /></el-icon>
          <span>区域分布</span>
        </div>
      </div>
    </div>

    <!-- 全屏控制按钮 -->
    <div class="fullscreen-control">
      <el-button type="primary" @click="toggleFullscreen" plain size="small">
        <el-icon><FullScreen v-if="!isFullscreen" /><Close v-else /></el-icon>
        {{ isFullscreen ? '退出全屏' : '全屏' }}
      </el-button>
    </div>

    <!-- 内容区域 -->
    <div class="tab-content">
      <!-- 行业分析内容 -->
      <div v-if="activeTab === 'industry'" class="industry-content">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(stat, index) in stats" :key="index">
            <el-card class="stat-card" :body-style="{ padding: '20px' }">
              <div class="stat-content">
                <div class="stat-icon" :style="{ backgroundColor: stat.color + '20' }">
                  <el-icon :size="24" :color="stat.color">
                    <component :is="stat.icon" />
                  </el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ formatValue(stat.value) }}</div>
                  <div class="stat-label">{{ stat.label }}</div>
                </div>
              </div>
              <div class="stat-trend" v-if="stat.trend">
                <el-tag 
                  :type="getTrendType(stat.trend.type)"
                  size="small"
                  effect="plain"
                  class="stat-trend-tag"
                >
                  {{ formatTrend(stat.trend) }}
                </el-tag>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <div class="chart-container" v-if="chartData">
          <!-- 第一行：企业规模分布和企业类型分布 -->
          <div class="chart-row">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-card class="chart-card">
                  <template #header>
                    <div class="chart-header">
                      <span>企业规模分布</span>
                      <el-tooltip content="按注册资本划分的企业规模分布" placement="top">
                        <el-icon><InfoFilled /></el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                  <div class="chart" ref="sizeChart"></div>
                </el-card>
              </el-col>
              <el-col :span="12">
                <el-card class="chart-card">
                  <template #header>
                    <div class="chart-header">
                      <span>企业类型分布</span>
                      <el-tooltip content="不同类型企业的数量分布" placement="top">
                        <el-icon><InfoFilled /></el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                  <div class="chart" ref="typeChart"></div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          
          <!-- 第二行：专利分布 -->
          <div class="chart-row">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-card class="chart-card">
                  <template #header>
                    <div class="chart-header">
                      <span>专利分布Top10</span>
                      <el-tooltip content="拥有专利数量最多的十家企业" placement="top">
                        <el-icon><InfoFilled /></el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                  <div class="chart chart-bar" ref="patentChart"></div>
                </el-card>
              </el-col>
            </el-row>
          </div>

          <!-- 第三行：创新效率 -->
          <div class="chart-row">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-card class="chart-card">
                  <template #header>
                    <div class="chart-header">
                      <span>创新效率Top10</span>
                      <el-tooltip content="人均专利数最高的十家企业" placement="top">
                        <el-icon><InfoFilled /></el-icon>
                      </el-tooltip>
                    </div>
                  </template>
                  <div class="chart chart-bar" ref="efficiencyChart"></div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      
      <!-- 区域分布分析内容 -->
      <div v-else-if="activeTab === 'region'" class="region-content">
        <div class="region-stats-container">
          <div class="stats-charts-container">
            <el-card class="chart-wrapper">
              <template #header>
                <div class="chart-header">
                  <span>各省企业数量统计</span>
                </div>
              </template>
              <div ref="companyCountChart" class="chart"></div>
            </el-card>
            <el-card class="chart-wrapper">
              <template #header>
                <div class="chart-header">
                  <span>各省员工数量统计</span>
                </div>
              </template>
              <div ref="employeeCountChart" class="chart"></div>
            </el-card>
            <el-card class="chart-wrapper">
              <template #header>
                <div class="chart-header">
                  <span>各省注册资本统计</span>
                </div>
              </template>
              <div ref="capitalChart" class="chart"></div>
            </el-card>
            <el-card class="chart-wrapper">
              <template #header>
                <div class="chart-header">
                  <span>各省高新企业统计</span>
                </div>
              </template>
              <div ref="highTechChart" class="chart"></div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { 
  TrendCharts, 
  Connection,
  InfoFilled,
  MapLocation,
  Shop, 
  User, 
  Money, 
  OfficeBuilding, 
  DataLine,
  FullScreen,
  Close
} from '@element-plus/icons-vue';
import * as echarts from 'echarts/core';
import { 
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  GeoComponent,
  VisualMapComponent
} from 'echarts/components';
import { PieChart, BarChart, MapChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
// 修改地图数据导入，改为动态导入
// import chinaMapData from '@/assets/china-map.json';

echarts.use([
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  GeoComponent,
  VisualMapComponent,
  PieChart,
  BarChart,
  MapChart,
  LabelLayout,
  CanvasRenderer
]);

// 引入统计图表混入
import { statsMixin } from '@/views/statsMixin';

export default {
  name: 'StatsOverview',
  components: {
    TrendCharts,
    Connection,
    InfoFilled,
    MapLocation,
    Shop, 
    User, 
    Money, 
    OfficeBuilding, 
    DataLine,
    FullScreen,
    Close
  },
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    console.log('StatsOverview 接收的原始数据:', props.data);
    const activeTab = ref('industry'); // 默认显示行业分析标签页
    
    // 行业分析图表引用
    const sizeChart = ref(null);
    const typeChart = ref(null);
    const patentChart = ref(null);
    const efficiencyChart = ref(null);
    let sizeChartInstance = null;
    let typeChartInstance = null;
    let patentChartInstance = null;
    let efficiencyChartInstance = null;
    
    // 区域分析图表引用 - 使用statsMixin
    const { 
      companyCountChart, 
      employeeCountChart,
      capitalChart,
      highTechChart,
      statsData,
      renderStatsCharts,
      toggleFullscreen: statsToggleFullscreen  // 获取statsMixin的toggleFullscreen函数但使用别名
    } = statsMixin.setup();
    
    // 准备本地的图表实例变量
    let companyCountChartInstance = null;
    let employeeCountChartInstance = null;
    let capitalChartInstance = null;
    let highTechChartInstance = null;
    
    const stats = computed(() => {
      if (!props.data) {
        console.warn('StatsOverview组件接收到空数据');
        return [
          { label: '企业总数', value: 0, icon: 'OfficeBuilding', color: '#409EFF' },
          { label: '总员工数', value: 0, icon: 'User', color: '#F56C6C' },
          { label: '高新技术企业', value: 0, icon: 'TrendCharts', color: '#67C23A' },
          { label: '平均注册资本', value: 0, icon: 'Connection', color: '#E6A23C' }
        ];
      }
      
      // 获取行业统计数据
      const industryStats = props.data.industryStatistics || {};
      
      // 确保数据结构完整
      let highTechData = { avgCapital: 0 };
      let nonHighTechData = { avgCapital: 0 };
      
      if (props.data.hightechComparison && Array.isArray(props.data.hightechComparison)) {
        highTechData = props.data.hightechComparison.find(item => item && item.isHighTech === true) || { avgCapital: 0 };
        nonHighTechData = props.data.hightechComparison.find(item => item && item.isHighTech === false) || { avgCapital: 1 };
      }
      
      console.log('高新企业数据:', highTechData, '普通企业数据:', nonHighTechData);
      
      return [
        {
          label: '企业总数',
          value: industryStats.companyCount || 0,
          icon: 'OfficeBuilding',
          color: '#409EFF'
        },
        {
          label: '总员工数',
          value: industryStats.totalEmployees || 0,
          icon: 'User',
          color: '#F56C6C'
        },
        {
          label: '高新技术企业',
          value: industryStats.hightechCount || 0,
          icon: 'TrendCharts',
          color: '#67C23A',
          trend: {
            type: 'stable',
            value: ((industryStats.hightechRatio || 0) * 100).toFixed(1),
            label: '占比'
          }
        },
        {
          label: '平均注册资本',
          value: industryStats.avgCapital || 0,
          icon: 'Connection',
          color: '#E6A23C'
        }
      ];
    });

    const chartData = computed(() => {
      if (!props.data) {
        console.warn('图表数据为空');
        return null;
      }
      
      try {
        // 企业规模分布数据
        const sizeData = Array.isArray(props.data.companySizeDistribution) 
          ? props.data.companySizeDistribution 
          : [];
        
        // 专利分布取前十
        const patentData = Array.isArray(props.data.patentDistribution)
          ? props.data.patentDistribution
              .filter(item => item && item.company && typeof item.patents !== 'undefined')
              .slice(0, 10)
              .map(item => ({
                name: item.company,
                value: item.patents
              }))
              .sort((a, b) => b.value - a.value)
          : [];
        
        // 创新效率数据
        const efficiencyData = Array.isArray(props.data.innovationEfficiency)
          ? props.data.innovationEfficiency
              .filter(item => item && item.company && typeof item.efficiency !== 'undefined')
              .slice(0, 10)
              .map(item => ({
                name: item.company,
                value: parseFloat(item.efficiency.toFixed(2))
              }))
              .sort((a, b) => b.value - a.value)
          : [];
        
        // 保证数据格式一致性
        const result = {
          size: sizeData.map(item => ({ 
            name: item.size || '未知', 
            value: item.count || 0 
          })),
          type: [
            { 
              name: '高新技术企业', 
              value: props.data.industryStatistics?.hightechCount || 0 
            },
            { 
              name: '非高新技术企业', 
              value: (props.data.industryStatistics?.companyCount || 0) - (props.data.industryStatistics?.hightechCount || 0) 
            }
          ],
          patents: patentData,
          efficiency: efficiencyData
        };
        
        console.log('处理后的图表数据:', result);
        return result;
      } catch (error) {
        console.error('处理图表数据出错:', error);
        return null;
      }
    });

    const formatValue = (value) => {
      console.log('格式化数值:', value, typeof value);
      if (typeof value === 'number') {
        if (value >= 10000) {
          return (value / 10000).toFixed(1) + '万';
        }
        return value.toLocaleString();
      } else if (value === undefined || value === null) {
        return '0';
      }
      return value || '0';
    };

    const getTrendType = (type) => {
      // 所有趋势标签都使用info类型，不再使用success和danger
      return 'info';
    };

    const formatTrend = (trend) => {
      if (!trend) return '';
      
      if (trend.label) {
        return `${trend.label}: ${trend.value}%`;
      }
      
      const symbols = {
        up: '↑',
        down: '↓',
        stable: '→'
      };
      return `${symbols[trend.type]} ${trend.value}%`;
    };

    const initCharts = () => {
      try {
        if (sizeChart.value && !sizeChartInstance) {
          sizeChartInstance = echarts.init(sizeChart.value);
          console.log('初始化企业规模分布图表');
        }
        if (typeChart.value && !typeChartInstance) {
          typeChartInstance = echarts.init(typeChart.value);
          console.log('初始化企业类型分布图表');
        }
        if (patentChart.value && !patentChartInstance) {
          patentChartInstance = echarts.init(patentChart.value);
          console.log('初始化专利分布图表');
        }
        if (efficiencyChart.value && !efficiencyChartInstance) {
          efficiencyChartInstance = echarts.init(efficiencyChart.value);
          console.log('初始化创新效率图表');
        }
        
        // 确保所有图表实例都已创建再更新
        if (chartData.value) {
          updateCharts();
        } else {
          console.warn('图表数据不可用，暂不更新图表');
          
          // 给各个图表实例设置一个无数据状态
          [sizeChartInstance, typeChartInstance, patentChartInstance, efficiencyChartInstance]
            .filter(chart => chart)
            .forEach(chart => {
              chart.setOption({
                title: {
                  text: '暂无数据',
                  left: 'center',
                  top: 'center',
                  textStyle: {
                    fontSize: 14,
                    color: '#909399'
                  }
                },
                series: []
              });
            });
        }
      } catch (error) {
        console.error('初始化图表失败:', error);
      }
    };

    const updateCharts = () => {
      if (!chartData.value) {
        console.warn('图表数据为空，无法更新图表');
        return;
      }

      console.log('更新图表数据:', chartData.value);

      // 验证数据格式
      const validateData = (dataArray, field) => {
        return Array.isArray(dataArray) && dataArray.length > 0 && dataArray.every(item => item && typeof item[field] !== 'undefined');
      };

      const pieOption = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          type: 'scroll',
          formatter: (name) => {
            return name.length > 10 ? name.substring(0, 10) + '...' : name;
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              formatter: '{b}: {c} ({d}%)'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            }
          }
        ]
      };

      if (sizeChartInstance) {
        const sizeColors = [
          '#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399', '#8B5CF6'
        ];
        
        if (!validateData(chartData.value.size, 'value')) {
          console.warn('企业规模分布数据格式不正确:', chartData.value.size);
          sizeChartInstance.setOption({
            title: {
              text: '企业规模分布(无数据)',
              left: 'center',
              top: 'center',
              textStyle: {
                fontSize: 14,
                color: '#909399'
              }
            },
            series: []
          });
        } else {
          sizeChartInstance.setOption({
            ...pieOption,
            title: {
              text: '企业规模分布',
              left: 'center',
              top: 'bottom',
              textStyle: {
                fontSize: 14
              }
            },
            series: [{
              ...pieOption.series[0],
              data: chartData.value.size,
              color: sizeColors
            }]
          });
        }
      }

      if (typeChartInstance) {
        if (!validateData(chartData.value.type, 'value')) {
          console.warn('企业类型分布数据格式不正确:', chartData.value.type);
          typeChartInstance.setOption({
            title: {
              text: '企业类型分布(无数据)',
              left: 'center',
              top: 'center',
              textStyle: {
                fontSize: 14,
                color: '#909399'
              }
            },
            series: []
          });
        } else {
          typeChartInstance.setOption({
            ...pieOption,
            title: {
              text: '企业类型分布',
              left: 'center',
              top: 'bottom',
              textStyle: {
                fontSize: 14
              }
            },
            series: [{
              ...pieOption.series[0],
              data: chartData.value.type,
              color: ['#67C23A', '#909399']
            }]
          });
        }
      }

      if (patentChartInstance) {
        if (!validateData(chartData.value.patents, 'value')) {
          console.warn('专利分布数据格式不正确:', chartData.value.patents);
          patentChartInstance.setOption({
            title: {
              text: '专利分布(无数据)',
              left: 'center',
              top: 'center',
              textStyle: {
                fontSize: 14,
                color: '#909399'
              }
            },
            series: []
          });
          return;
        }
        
        const patentCompanies = chartData.value.patents.map(item => item.name);
        const patentValues = chartData.value.patents.map(item => item.value);
        
        patentChartInstance.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            name: '专利数量'
          },
          yAxis: {
            type: 'category',
            data: patentCompanies,
            axisLabel: {
              width: 120,
              overflow: 'truncate',
              interval: 0
            }
          },
          series: [
            {
              name: '专利数量',
              type: 'bar',
              data: patentValues,
              itemStyle: {
                color: function(params) {
                  const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];
                  return colors[params.dataIndex % colors.length];
                }
              }
            }
          ],
          dataZoom: [
            {
              type: 'inside',
              orient: 'vertical'
            }
          ]
        });
      }

      if (efficiencyChartInstance) {
        if (!validateData(chartData.value.efficiency, 'value')) {
          console.warn('创新效率数据格式不正确:', chartData.value.efficiency);
          efficiencyChartInstance.setOption({
            title: {
              text: '创新效率(无数据)',
              left: 'center',
              top: 'center',
              textStyle: {
                fontSize: 14,
                color: '#909399'
              }
            },
            series: []
          });
          return;
        }
        
        const efficiencyCompanies = chartData.value.efficiency.map(item => item.name);
        const efficiencyValues = chartData.value.efficiency.map(item => item.value);
        
        efficiencyChartInstance.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            name: '人均专利数'
          },
          yAxis: {
            type: 'category',
            data: efficiencyCompanies,
            axisLabel: {
              width: 120,
              overflow: 'truncate',
              interval: 0
            }
          },
          series: [
            {
              name: '人均专利数',
              type: 'bar',
              data: efficiencyValues,
              itemStyle: {
                color: function(params) {
                  const colors = ['#67C23A', '#409EFF', '#E6A23C', '#F56C6C', '#909399'];
                  return colors[params.dataIndex % colors.length];
                }
              },
              label: {
                show: true,
                position: 'right',
                formatter: '{c}'
              }
            }
          ],
          dataZoom: [
            {
              type: 'inside',
              orient: 'vertical'
            }
          ]
        });
      }
    };

    const handleResize = () => {
      sizeChartInstance?.resize();
      typeChartInstance?.resize();
      patentChartInstance?.resize();
      efficiencyChartInstance?.resize();
    };

    // 添加数据变化监听，确保在数据更新时重新初始化图表
    watch(() => props.data, (newData) => {
      console.log('StatsOverview 检测到数据变化:', newData);
      // 在下一个DOM更新周期初始化图表
      nextTick(() => {
        if (activeTab.value === 'industry') {
          console.log('数据变化后初始化行业图表');
          initIndustryCharts();
        } else if (activeTab.value === 'region') {
          console.log('数据变化后初始化区域图表');
          // 设置区域数据
          if (newData) {
            // 提取区域数据，如果props.data本身是数组，则直接使用；
            // 如果是对象且有regionStats字段，则使用该字段
            if (newData.regionStats && Array.isArray(newData.regionStats)) {
              statsData.value = newData.regionStats;
              console.log('从regionStats字段获取区域数据，长度:', statsData.value.length);
            } else if (Array.isArray(newData)) {
              statsData.value = newData;
              console.log('直接从props.data获取区域数据，长度:', statsData.value.length);
            } else {
              console.warn('无法从数据中提取区域信息');
              statsData.value = [];
            }
            
            if (statsData.value && statsData.value.length > 0) {
              // 延迟初始化，确保DOM完全更新
              setTimeout(() => {
                initRegionCharts();
              }, 100);
            } else {
              console.warn('区域数据为空，跳过图表初始化');
            }
          }
        }
      });
    }, { deep: true });

    // 在组件挂载时初始化图表
    onMounted(() => {
      console.log('StatsOverview 组件挂载', props.data);
      // 确保在组件挂载后有数据时初始化图表
      nextTick(() => {
        if (props.data) {
          if (activeTab.value === 'industry') {
            initIndustryCharts();
          } else if (activeTab.value === 'region' && props.data.regionStats) {
            statsData.value = props.data.regionStats;
            initRegionCharts();
          }
        }
      });
    });

    onUnmounted(() => {
      // 销毁所有图表实例
      if (sizeChartInstance) sizeChartInstance.dispose();
      if (typeChartInstance) typeChartInstance.dispose();
      if (patentChartInstance) patentChartInstance.dispose();
      if (efficiencyChartInstance) efficiencyChartInstance.dispose();
      
      if (companyCountChartInstance) companyCountChartInstance.dispose();
      if (employeeCountChartInstance) employeeCountChartInstance.dispose();
      if (capitalChartInstance) capitalChartInstance.dispose();
      if (highTechChartInstance) highTechChartInstance.dispose();
    });

    // 处理标签页切换
    const handleTabClick = (tab) => {
      console.log('切换到标签页:', tab.props.name);
      
      // 之前的激活标签页
      const previousTab = activeTab.value;
      
      // 更新当前激活的标签页
      activeTab.value = tab.props.name;
      
      // 如果切换到相同标签页，则不做处理
      if (previousTab === activeTab.value) {
        console.log('点击了相同的标签页，无需重新初始化');
        return;
      }
      
      // 立即清理所有图表实例，无论之前是什么标签页
      // 清理行业相关图表
      if (sizeChartInstance) {
        sizeChartInstance.dispose();
        sizeChartInstance = null;
      }
      if (typeChartInstance) {
        typeChartInstance.dispose();
        typeChartInstance = null;
      }
      if (patentChartInstance) {
        patentChartInstance.dispose();
        patentChartInstance = null;
      }
      if (efficiencyChartInstance) {
        efficiencyChartInstance.dispose();
        efficiencyChartInstance = null;
      }
      
      // 清理区域相关图表
      if (companyCountChartInstance) {
        companyCountChartInstance.dispose();
        companyCountChartInstance = null;
      }
      if (employeeCountChartInstance) {
        employeeCountChartInstance.dispose();
        employeeCountChartInstance = null;
      }
      if (capitalChartInstance) {
        capitalChartInstance.dispose();
        capitalChartInstance = null;
      }
      if (highTechChartInstance) {
        highTechChartInstance.dispose();
        highTechChartInstance = null;
      }
      
      console.log('已清理所有图表实例');
      
      // 确保DOM更新后再初始化图表
      nextTick(() => {
        // 初始化当前标签页的图表
        if (activeTab.value === 'region') {
          console.log('初始化区域标签页图表...');
          // 提取区域数据，如果props.data本身是数组，则直接使用；
          // 如果是对象且有regionStats字段，则使用该字段
          if (props.data) {
            if (props.data.regionStats && Array.isArray(props.data.regionStats)) {
              statsData.value = props.data.regionStats;
              console.log('从regionStats字段获取区域数据，长度:', statsData.value.length);
            } else if (Array.isArray(props.data)) {
              statsData.value = props.data;
              console.log('直接从props.data获取区域数据，长度:', statsData.value.length);
            } else {
              console.warn('无法从数据中提取区域信息');
              statsData.value = [];
            }
          }
          
          // 检查是否有区域数据
          if (statsData.value && statsData.value.length > 0) {
            console.log('区域数据可用，开始初始化图表');
            // 延迟初始化，确保DOM完全更新
            setTimeout(() => {
              initRegionCharts();
            }, 100);
          } else {
            console.log('区域暂无数据，跳过图表初始化');
          }
        } else {
          console.log('初始化行业标签页图表...');
          // 检查是否有行业数据
          const hasIndustryData = chartData.value !== null;
          if (hasIndustryData) {
            initIndustryCharts();
          } else {
            console.log('行业暂无数据，跳过图表初始化');
          }
        }
      });
    };
    
    // 全屏功能
    const isFullscreen = ref(false);
    const toggleFullscreen = () => {
      try {
        // 先尝试找到.stats-overview容器
        const container = document.querySelector('.stats-overview');
        
        if (!container) {
          console.error('未找到全屏容器 .stats-overview');
          return;
        }
        
        // 检查当前是否已经处于全屏状态
        const isCurrentlyFullscreen = Boolean(
          document.fullscreenElement || 
          document.webkitFullscreenElement || 
          document.mozFullScreenElement ||
          document.msFullscreenElement
        );
        
        console.log('当前全屏状态:', isCurrentlyFullscreen);
        
        if (!isCurrentlyFullscreen) {
          // 在进入全屏前强制设置整个页面的背景
          document.documentElement.style.backgroundColor = 'white';
          document.body.style.backgroundColor = 'white';
          
          // 设置容器及其所有子元素的背景色为白色
          container.style.backgroundColor = 'white';
          container.querySelectorAll('*').forEach(el => {
            el.style.backgroundColor = 'white';
          });
          
          // 特别设置图表容器背景
          container.querySelectorAll('.chart, .chart-bar').forEach(el => {
            el.style.backgroundColor = 'white';
          });
          
          // 检测是否为Safari浏览器
          const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
          if (isSafari) {
            console.log('检测到Safari浏览器，应用特殊全屏处理');
            // Safari特殊处理
            document.body.classList.add('safari-fullscreen');
            document.documentElement.classList.add('safari-fullscreen');
          }
          
          // 进入全屏模式
          if (container.requestFullscreen) {
            container.requestFullscreen();
          } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
          } else if (container.mozRequestFullScreen) {
            container.mozRequestFullScreen();
          } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
          }
          
          console.log('正在进入全屏模式，已设置白色背景');
        } else {
          // 检测是否为Safari浏览器
          const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
          if (isSafari) {
            document.body.classList.remove('safari-fullscreen');
            document.documentElement.classList.remove('safari-fullscreen');
          }
          
          // 确保document处于活动状态
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
          
          console.log('正在退出全屏模式...');
        }
        
        // 延迟重新调整图表大小，确保DOM更新后再调整
        setTimeout(() => {
          console.log('重新调整图表大小，当前激活标签页:', activeTab.value);
          if (activeTab.value === 'industry') {
            if (sizeChartInstance) sizeChartInstance.resize();
            if (typeChartInstance) typeChartInstance.resize();
            if (patentChartInstance) patentChartInstance.resize();
            if (efficiencyChartInstance) efficiencyChartInstance.resize();
          } else if (activeTab.value === 'region') {
            if (companyCountChartInstance) companyCountChartInstance.resize();
            if (employeeCountChartInstance) employeeCountChartInstance.resize();
            if (capitalChartInstance) capitalChartInstance.resize();
            if (highTechChartInstance) highTechChartInstance.resize();
          }
        }, 500); // 增加等待时间，确保DOM完全更新
      } catch (error) {
        console.error('全屏操作出错:', error);
      }
    };

    // 初始化行业图表
    const initIndustryCharts = () => {
      console.log('初始化行业图表...');
      
      // 清理可能存在的旧实例
      if (sizeChartInstance) {
        sizeChartInstance.dispose();
        sizeChartInstance = null;
      }
      if (typeChartInstance) {
        typeChartInstance.dispose();
        typeChartInstance = null;
      }
      if (patentChartInstance) {
        patentChartInstance.dispose();
        patentChartInstance = null;
      }
      if (efficiencyChartInstance) {
        efficiencyChartInstance.dispose();
        efficiencyChartInstance = null;
      }
      
      // 获取图表数据
      if (!chartData.value) {
        console.warn('行业图表数据为空');
        return;
      }
      
      // 延迟初始化图表，确保DOM已完全渲染
      setTimeout(() => {
        // 初始化企业规模分布图表
        if (sizeChart.value) {
          try {
            sizeChartInstance = echarts.init(sizeChart.value);
            sizeChartInstance.setOption({
              backgroundColor: 'white',
              title: {
                text: '企业规模分布',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'horizontal',
                bottom: 'bottom'
              },
              series: [
                {
                  type: 'pie',
                  radius: '50%',
                  data: chartData.value.size || [],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            });
            console.log('规模分布图表初始化完成');
          } catch (error) {
            console.error('初始化规模分布图表失败:', error);
          }
        }
        
        // 初始化企业类型分布图表
        if (typeChart.value) {
          try {
            typeChartInstance = echarts.init(typeChart.value);
            typeChartInstance.setOption({
              backgroundColor: 'white',
              title: {
                text: '企业类型分布',
                left: 'center'
              },
              tooltip: {
                trigger: 'item'
              },
              legend: {
                orient: 'horizontal',
                bottom: 'bottom'
              },
              series: [
                {
                  type: 'pie',
                  radius: '50%',
                  data: chartData.value.type || [],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            });
            console.log('企业类型图表初始化完成');
          } catch (error) {
            console.error('初始化企业类型图表失败:', error);
          }
        }
        
        // 初始化专利分布图表
        if (patentChart.value) {
          try {
            patentChartInstance = echarts.init(patentChart.value);
            patentChartInstance.setOption({
              backgroundColor: 'white',
              title: {
                text: '专利分布Top10',
                left: 'center'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [
                {
                  type: 'category',
                  data: chartData.value.patents?.map(item => item.name) || [],
                  axisTick: {
                    alignWithLabel: true
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: '专利数量',
                  type: 'bar',
                  barWidth: '60%',
                  data: chartData.value.patents?.map(item => item.value) || []
                }
              ]
            });
            console.log('专利分布图表初始化完成');
          } catch (error) {
            console.error('初始化专利分布图表失败:', error);
          }
        }
        
        // 初始化效率指数图表
        if (efficiencyChart.value) {
          try {
            efficiencyChartInstance = echarts.init(efficiencyChart.value);
            efficiencyChartInstance.setOption({
              backgroundColor: 'white',
              title: {
                text: '创新效率Top10',
                left: 'center'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'value',
                name: '人均专利数'
              },
              yAxis: {
                type: 'category',
                data: chartData.value.efficiency?.map(item => item.name) || [],
                axisLabel: {
                  width: 120,
                  overflow: 'truncate',
                  interval: 0
                }
              },
              series: [{
                name: '人均专利数',
                type: 'bar',
                data: chartData.value.efficiency?.map(item => item.value) || [],
                itemStyle: {
                  color: function(params) {
                    const colors = ['#67C23A', '#409EFF', '#E6A23C', '#F56C6C', '#909399'];
                    return colors[params.dataIndex % colors.length];
                  }
                },
                label: {
                  show: true,
                  position: 'right',
                  formatter: '{c}'
                }
              }],
              dataZoom: [
                {
                  type: 'inside',
                  orient: 'vertical'
                }
              ]
            });
            console.log('创新效率图表初始化完成');
          } catch (error) {
            console.error('初始化创新效率图表失败:', error);
          }
        }
        
        // 添加窗口大小变化监听器
        window.addEventListener('resize', handleResize);
        
        // 手动触发一次resize，确保初始布局正确
        setTimeout(() => {
          handleResize();
        }, 300);
      }, 300); // 增加延迟时间，确保DOM完全渲染
    };

    // 初始化区域图表
    const initRegionCharts = () => {
      console.log('初始化区域图表...');
      
      // 清理可能存在的旧实例
      if (companyCountChartInstance) {
        companyCountChartInstance.dispose();
        companyCountChartInstance = null;
      }
      if (employeeCountChartInstance) {
        employeeCountChartInstance.dispose();
        employeeCountChartInstance = null;
      }
      if (capitalChartInstance) {
        capitalChartInstance.dispose();
        capitalChartInstance = null;
      }
      if (highTechChartInstance) {
        highTechChartInstance.dispose();
        highTechChartInstance = null;
      }
      
      // 获取区域统计数据
      statsData.value = props.data?.regionStats || [];
      console.log('区域图表数据:', statsData.value);
      
      if (!statsData.value || statsData.value.length === 0) {
        console.warn('区域图表数据为空');
        return;
      }
      
      // 确保DOM已更新后再创建图表实例
      nextTick(() => {
        try {
          // 创建图表实例
          if (companyCountChart.value) {
            companyCountChartInstance = echarts.init(companyCountChart.value);
            console.log('企业数量图表实例已创建:', companyCountChartInstance);
          } else {
            console.error('未找到企业数量图表容器');
          }
          
          if (employeeCountChart.value) {
            employeeCountChartInstance = echarts.init(employeeCountChart.value);
            console.log('从业人员图表实例已创建:', employeeCountChartInstance);
          } else {
            console.error('未找到从业人员图表容器');
          }
          
          if (capitalChart.value) {
            capitalChartInstance = echarts.init(capitalChart.value);
            console.log('注册资本图表实例已创建:', capitalChartInstance);
          } else {
            console.error('未找到注册资本图表容器');
          }
          
          if (highTechChart.value) {
            highTechChartInstance = echarts.init(highTechChart.value);
            console.log('高新企业图表实例已创建:', highTechChartInstance);
          } else {
            console.error('未找到高新企业图表容器');
          }
          
          // 调用渲染函数
          if (statsData.value && statsData.value.length > 0) {
            console.log('开始渲染区域统计图表，数据长度:', statsData.value.length);
            renderStatsCharts();
          } else {
            console.warn('区域统计数据为空，无法渲染图表');
            
            // 设置空数据提示
            [companyCountChartInstance, employeeCountChartInstance, capitalChartInstance, highTechChartInstance]
              .filter(chart => chart)
              .forEach(chart => {
                chart.setOption({
                  title: {
                    text: '暂无数据',
                    left: 'center',
                    top: 'center',
                    textStyle: {
                      fontSize: 14,
                      color: '#909399'
                    }
                  }
                });
              });
          }
        } catch (error) {
          console.error('初始化区域图表失败:', error);
          
          // 尝试再次渲染区域图表，增加延迟
          setTimeout(() => {
            try {
              if (statsData.value && statsData.value.length > 0) {
                console.log('延迟后再次尝试渲染区域统计图表');
                renderStatsCharts();
              }
            } catch (retryError) {
              console.error('延迟重试渲染区域图表失败:', retryError);
            }
          }, 500);
        }
      });
    };

    return {
      activeTab,
      handleTabClick,
      stats,
      chartData,
      formatValue,
      formatTrend,
      getTrendType,
      sizeChart,
      typeChart,
      patentChart,
      efficiencyChart,
      companyCountChart,
      employeeCountChart,
      capitalChart,
      highTechChart,
      isFullscreen,
      toggleFullscreen
    };
  }
};
</script>

<style scoped>
.stats-overview {
  padding: 0;
  background-color: var(--el-bg-color-page, #f5f7fa);
  border-radius: 8px;
  overflow: hidden;
}

/* 现代化标签页样式 */
.modern-tabs-container {
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(var(--el-color-primary-rgb), 0.05) 0%, rgba(var(--el-color-primary-rgb), 0.1) 100%);
  padding: 4px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.modern-tabs-wrapper {
  display: flex;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 4px;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.modern-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  color: var(--el-text-color-secondary);
  font-weight: 500;
  gap: 8px;
  z-index: 1;
}

.modern-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--el-color-primary-light-7) 0%, var(--el-color-primary-light-9) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.modern-tab:hover:not(.active) {
  color: var(--el-color-primary);
}

.modern-tab:hover:not(.active)::before {
  opacity: 0.5;
}

.modern-tab.active {
  color: white;
  background: linear-gradient(135deg, rgba(var(--el-color-primary-rgb), 0.6) 0%, rgba(var(--el-color-primary-rgb), 0.4) 100%);
  box-shadow: 0 2px 8px rgba(var(--el-color-primary-rgb), 0.2);
  transform: translateY(-1px);
}

.modern-tab .tab-icon {
  font-size: 18px;
}

/* 内容区域样式 */
.tab-content {
  padding: 10px;
  min-height: 400px;
  overflow: hidden;
}

.region-content {
  animation: fadeIn 0.4s ease-in-out;
  overflow: hidden;
}

.industry-content {
  animation: fadeIn 0.4s ease-in-out;
  overflow: hidden;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chart-wrapper {
  height: 100%;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: none;
  transition: all 0.3s ease;
  position: relative;
}

.chart-wrapper:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.chart-wrapper:before {
  display: none;
}

/* 图表卡片头部样式 */
:deep(.el-card__header) {
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  background-color: rgba(var(--el-bg-color-page-rgb), 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chart-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.chart-header i {
  color: var(--el-color-primary);
  font-size: 18px;
}

/* 统计卡片样式优化 */
.stat-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-left: none;
  margin-bottom: 20px;
  border-radius: 12px;
  transition: all 0.3s ease;
  border: none;
  overflow: hidden;
  position: relative;
  height: 130px;
  display: flex;
  flex-direction: column;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 12px;
  flex: 1;
}

.stat-icon {
  padding: 18px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  line-height: 1.2;
  transition: all 0.3s ease;
}

.stat-card:hover .stat-value {
  color: var(--el-color-primary);
}

.stat-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-top: 4px;
  opacity: 0.8;
}

.stat-trend {
  margin-top: 12px;
}

.chart-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
  border: none;
  overflow: hidden;
}

.chart-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.chart {
  height: 300px;
}

.chart-bar {
  height: 400px;
}

:deep(.el-card__header) {
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-light);
  background-color: var(--el-bg-color-page, #f5f7fa);
}

:deep(.el-tag) {
  border-radius: 12px;
  padding: 0 10px;
  font-weight: 500;
}

@media (max-width: 1200px) {
  .industry-content .el-col {
    width: 50%;
  }
}

@media (max-width: 768px) {
  .chart-bar {
    height: 600px;
  }
  
  .modern-tab {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .stat-value {
    font-size: 22px;
  }
  
  .industry-content .el-col {
    width: 100%;
  }
  
  .stat-card {
    height: auto;
    min-height: 110px;
  }
}

.region-stats-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stats-charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 320px);
  gap: 20px;
  margin-bottom: 20px;
}

/* 响应式布局 */
@media (max-width: 992px) {
  .stats-charts-container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 300px);
  }
}

.fullscreen-control {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}

/* 重新编写全屏样式，确保在所有浏览器中背景为白色 */
/* 基础样式 */
:fullscreen {
  background-color: white !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: auto !important;
  padding: 20px !important;
  background: white !important;
}

/* Webkit浏览器(Chrome/Safari) */
:-webkit-full-screen {
  background-color: white !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: auto !important;
  padding: 20px !important;
  background: white !important;
}

/* Firefox */
:-moz-full-screen {
  background-color: white !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: auto !important;
  padding: 20px !important;
  background: white !important;
}

/* IE/Edge */
:-ms-fullscreen {
  background-color: white !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: auto !important;
  padding: 20px !important;
  background: white !important;
}

/* 针对backdrop元素(全屏时的背景)设置白色背景 */
::backdrop {
  background-color: white !important;
  background: white !important;
}

/* Webkit backdrop */
::-webkit-backdrop {
  background-color: white !important;
  background: white !important;
}

/* 针对组件内部元素的全屏样式 */
.stats-overview:fullscreen,
.stats-overview:-webkit-full-screen,
.stats-overview:-moz-full-screen,
.stats-overview:-ms-fullscreen {
  background-color: white !important;
  color: var(--el-text-color-primary) !important;
  background: white !important;
}

/* 确保图表容器在全屏时也有白色背景 */
.chart:fullscreen,
.chart:-webkit-full-screen,
.chart:-moz-full-screen,
.chart:-ms-fullscreen,
.chart-bar:fullscreen,
.chart-bar:-webkit-full-screen,
.chart-bar:-moz-full-screen,
.chart-bar:-ms-fullscreen {
  background-color: white !important;
  background: white !important;
}

/* 针对Safari特别处理 */
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    .stats-overview:-webkit-full-screen {
      background-color: white !important;
      background: white !important;
    }
    
    ::-webkit-backdrop {
      background-color: white !important;
      background: white !important;
    }
    
    /* 额外的Safari全屏样式 */
    body:-webkit-full-screen {
      background-color: white !important;
      background: white !important;
    }
    
    html:-webkit-full-screen,
    body:-webkit-full-screen,
    div:-webkit-full-screen {
      background-color: white !important;
      background: white !important;
    }
    
    /* Safari会在全屏时使用webkit-full-screen-ancestor类 */
    .webkit-full-screen-ancestor {
      background-color: white !important;
      background: white !important;
    }
    
    .webkit-full-screen-ancestor * {
      background-color: white !important;
      background: white !important;
    }
  }
}

/* 覆盖任何可能导致黑色背景的样式 */
.stats-overview * {
  background-color: inherit;
}

.stats-overview:fullscreen * {
  background-color: inherit;
}

/* Safari特殊全屏类 */
.safari-fullscreen {
  background-color: white !important;
  background: white !important;
}

html.safari-fullscreen,
body.safari-fullscreen {
  background-color: white !important;
  background: white !important;
}

.safari-fullscreen .stats-overview {
  background-color: white !important;
  background: white !important;
}

.safari-fullscreen .chart,
.safari-fullscreen .chart-bar {
  background-color: white !important;
  background: white !important;
}

/* 全屏模式下额外的强制背景设置 */
:fullscreen::before,
:-webkit-full-screen::before,
:-moz-full-screen::before,
:-ms-fullscreen::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white !important;
  z-index: -1;
}

.stat-trend-tag {
  font-size: 12px;
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
  border-radius: 4px;
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #606266;
  font-weight: normal;
}

/* 调整el-row和el-col样式 */
.industry-content .el-row {
  display: flex;
  flex-wrap: wrap;
}

.industry-content .el-col {
  display: flex;
}

.chart-container {
  margin-top: 20px;
  width: 100%;
  clear: both;
  overflow: hidden;
}

.chart-row {
  margin-bottom: 20px;
  clear: both;
  width: 100%;
}

.chart-container .el-row {
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.chart-container .el-col {
  display: flex;
  margin-bottom: 20px;
  float: left;
}

.chart-container .chart-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-container .chart {
  flex: 1;
  min-height: 300px;
}

.chart-container .chart-bar {
  flex: 1;
  min-height: 400px;
}

/* 以下是修复企业规模分布和企业类型分布的特别样式 */
.chart-container .el-col-12 {
  width: 50%;
  box-sizing: border-box;
  padding: 0 10px;
}

@media (max-width: 992px) {
  .chart-container .el-col-12 {
    width: 100%;
  }
}

/* 添加新样式用于修改二级tab的样式 */
/* 针对第一个红框中的行业分析tab */
.modern-tabs-container:not(:first-of-type),
.modern-tabs-container ~ .modern-tabs-container {
  margin-bottom: 16px;
}

.modern-tabs-container:not(:first-of-type) .modern-tab.active,
.modern-tabs-container ~ .modern-tabs-container .modern-tab.active {
  background: rgba(var(--el-color-primary-rgb), 0.1);
  box-shadow: 0 2px 4px rgba(var(--el-color-primary-rgb), 0.1);
  transform: none;
  color: var(--el-color-primary);
}

/* 为二级tab容器添加淡灰色背景 */
.tab-content .modern-tabs-container {
  background: #f9fafc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.tab-content .modern-tabs-wrapper {
  background: rgba(255, 255, 255, 0.6);
}

/* 统一修改下面的tab样式 */
.stats-overview .tab-content .modern-tab.active {
  background: rgba(var(--el-color-primary-rgb), 0.1);
  box-shadow: 0 2px 4px rgba(var(--el-color-primary-rgb), 0.1);
  transform: none;
  color: var(--el-color-primary);
}

/* 为二级tab添加边框替代渐变背景 */
.tab-content .modern-tab.active {
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(var(--el-color-primary-rgb), 0.2);
  box-shadow: none;
  color: var(--el-color-primary) !important;
}

/* 添加样式，去除卡片标题左侧的蓝色竖线 */
.stat-title {
  border-left: none !important;
  padding-left: 0 !important;
}

/* 如果有嵌套标题，也要去除左侧的蓝色竖线 */
.stat-card .stat-title,
.chart-card .stat-title {
  border-left: none !important;
  padding-left: 0 !important;
  /* 替换为下划线，更现代化 */
  border-bottom: 1px solid rgba(var(--el-color-primary-rgb), 0.1);
  padding-bottom: 8px;
  margin-left: 0;
}

/* 强调标题本身的颜色而不是依赖边框 */
.stat-title {
  color: var(--el-color-primary) !important;
  font-weight: 600;
}
</style> 